import React, { useState } from "react";
import "./GoodsImage.css";

export default function GoodsImage() {
  //声明一个变量保存图片路径
  let imageArr = [
    "/goods/1.jpg",
    "/goods/2.jpg",
    "/goods/3.jpg",
    "/goods/4.jpg",
    "/goods/5.jpg",
  ];
  //声明一个状态
  let [index, setIndex] = useState(0);
  //声明一个函数
  let handle = (key) => {
    return () => {
      setIndex(key);
    }
  }
  return (
    <div className="goods-image">
      <div className="big-image">
        <img src={imageArr[index]} alt="" />
      </div>
      <div className="small-images">
        {imageArr.map((item, ind) => {
          return (
            <div key={ind} className="item" onMouseOver={handle(ind)}>
              <img className={ind === index ? "active" : ''} src={item} alt="" />
            </div>
          );
        })}
      </div>
    </div>
  );
}
